<?php
/**
 * 3-4岁形状匹配游戏内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('3-4岁形状匹配');

// 页面特定样式
$page_styles = <<<HTML
<style>
    /* 3-4岁形状匹配游戏特定样式 */
    body {
        background-color: #e3f2fd;
        font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
    }
    
    .navbar {
        background: linear-gradient(to right, #64b5f6, #90caf9);
        border-radius: 0 0 20px 20px;
    }
    
    .matching-header {
        text-align: center;
        padding: 40px 0;
        margin-bottom: 30px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border: 6px solid #bbdefb;
    }
    
    .matching-title {
        font-size: 2.5rem;
        font-weight: bold;
        color: #2196f3;
        margin-bottom: 15px;
    }
    
    .matching-subtitle {
        font-size: 1.2rem;
        color: #666;
        max-width: 800px;
        margin: 0 auto 20px;
    }
    
    .matching-container {
        background-color: white;
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 40px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }
    
    .matching-group {
        margin-bottom: 30px;
    }
    
    .group-title {
        font-size: 1.8rem;
        color: #2196f3;
        text-align: center;
        margin-bottom: 20px;
        font-weight: bold;
    }
    
    .matching-card {
        border: 3px solid #bbdefb;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        margin-bottom: 30px;
        transition: transform 0.3s ease;
    }
    
    .matching-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    
    .matching-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .matching-info {
        padding: 20px;
        text-align: center;
        background-color: #f6fbff;
    }
    
    .matching-name {
        font-size: 1.5rem;
        font-weight: bold;
        color: #2196f3;
        margin-bottom: 10px;
    }
    
    .matching-description {
        color: #666;
        margin-bottom: 15px;
    }
    
    .matching-level {
        color: #2196f3;
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    .btn-matching {
        background-color: #2196f3;
        color: white;
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    
    .btn-matching:hover {
        background-color: #1976d2;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        color: white;
    }
    
    .back-button {
        background-color: #2196f3;
        color: white;
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: bold;
        margin-bottom: 30px;
        display: inline-block;
        transition: all 0.3s ease;
    }
    
    .back-button:hover {
        background-color: #1976d2;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        color: white;
    }
    
    .how-to-play {
        background-color: white;
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 40px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }
    
    .how-to-title {
        font-size: 1.8rem;
        color: #2196f3;
        text-align: center;
        margin-bottom: 25px;
        font-weight: bold;
    }
    
    .step-item {
        display: flex;
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f5f9ff;
        border-radius: 10px;
        align-items: center;
    }
    
    .step-number {
        font-size: 2rem;
        font-weight: bold;
        color: #2196f3;
        margin-right: 20px;
        min-width: 50px;
        text-align: center;
    }
    
    .step-content {
        flex: 1;
    }
    
    .step-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 5px;
        color: #2196f3;
    }
    
    .step-text {
        color: #666;
    }
    
    .benefits-section {
        background-color: white;
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 40px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }
    
    .benefits-title {
        font-size: 1.8rem;
        color: #2196f3;
        text-align: center;
        margin-bottom: 25px;
        font-weight: bold;
    }
    
    .benefit-item {
        margin-bottom: 15px;
        padding: 15px;
        background-color: #f5f9ff;
        border-radius: 10px;
        transition: all 0.3s ease;
    }
    
    .benefit-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    
    .benefit-icon {
        font-size: 2rem;
        margin-bottom: 15px;
        color: #2196f3;
    }
    
    .benefit-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #2196f3;
    }
    
    .benefit-text {
        color: #666;
    }
</style>
HTML;
?>

<!-- 主内容区 -->
<div class="container mt-4">
    <!-- 返回按钮 -->
    <a href="<?php echo page_url('age-3-4-training'); ?>" class="back-button mb-4">
        <i class="fas fa-arrow-left mr-2"></i> 返回思维训练
    </a>
    
    <!-- 形状匹配标题 -->
    <div class="matching-header">
        <h1 class="matching-title">形状匹配</h1>
        <p class="matching-subtitle">通过连线、拖拽等方式匹配相关的物品，锻炼孩子的逻辑思维和分类能力。</p>
        <img src="<?php echo asset_url('images/matching-banner.jpg'); ?>" alt="形状匹配" class="img-fluid rounded" style="max-height: 300px;">
    </div>
    
    <!-- 形状匹配游戏 -->
    <div class="matching-container">
        <!-- 简单匹配 -->
        <div class="matching-group">
            <h2 class="group-title">简单匹配</h2>
            
            <div class="row">
                <!-- 形状对应 -->
                <div class="col-md-4">
                    <div class="matching-card">
                        <img src="<?php echo asset_url('images/shape-matching.jpg'); ?>" alt="形状对应" class="matching-image">
                        <div class="matching-info">
                            <h3 class="matching-name">形状对应</h3>
                            <p class="matching-description">将相同形状的物品连接起来，认识基础几何形状。</p>
                            <p class="matching-level">难度：★☆☆</p>
                            <a href="<?php echo page_url('matching-shapes'); ?>" class="btn btn-matching">开始游戏</a>
                        </div>
                    </div>
                </div>
                
                <!-- 颜色匹配 -->
                <div class="col-md-4">
                    <div class="matching-card">
                        <img src="<?php echo asset_url('images/color-matching.jpg'); ?>" alt="颜色匹配" class="matching-image">
                        <div class="matching-info">
                            <h3 class="matching-name">颜色匹配</h3>
                            <p class="matching-description">将相同颜色的物品连接起来，加强颜色辨识能力。</p>
                            <p class="matching-level">难度：★☆☆</p>
                            <a href="<?php echo page_url('matching-colors'); ?>" class="btn btn-matching">开始游戏</a>
                        </div>
                    </div>
                </div>
                
                <!-- 大小匹配 -->
                <div class="col-md-4">
                    <div class="matching-card">
                        <img src="<?php echo asset_url('images/size-matching.jpg'); ?>" alt="大小匹配" class="matching-image">
                        <div class="matching-info">
                            <h3 class="matching-name">大小匹配</h3>
                            <p class="matching-description">按照物品大小进行排序和匹配，理解大小概念。</p>
                            <p class="matching-level">难度：★☆☆</p>
                            <a href="<?php echo page_url('matching-sizes'); ?>" class="btn btn-matching">开始游戏</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 进阶匹配 -->
        <div class="matching-group">
            <h2 class="group-title">进阶匹配</h2>
            
            <div class="row">
                <!-- 动物及其宝宝 -->
                <div class="col-md-4">
                    <div class="matching-card">
                        <img src="<?php echo asset_url('images/animal-family-matching.jpg'); ?>" alt="动物及其宝宝" class="matching-image">
                        <div class="matching-info">
                            <h3 class="matching-name">动物家庭</h3>
                            <p class="matching-description">将成年动物与其幼崽配对，了解动物成长。</p>
                            <p class="matching-level">难度：★★☆</p>
                            <a href="<?php echo page_url('matching-animal-families'); ?>" class="btn btn-matching">开始游戏</a>
                        </div>
                    </div>
                </div>
                
                <!-- 物品用途 -->
                <div class="col-md-4">
                    <div class="matching-card">
                        <img src="<?php echo asset_url('images/object-usage-matching.jpg'); ?>" alt="物品用途" class="matching-image">
                        <div class="matching-info">
                            <h3 class="matching-name">物品用途</h3>
                            <p class="matching-description">将物品与其用途连接，理解日常物品的功能。</p>
                            <p class="matching-level">难度：★★☆</p>
                            <a href="<?php echo page_url('matching-object-usage'); ?>" class="btn btn-matching">开始游戏</a>
                        </div>
                    </div>
                </div>
                
                <!-- 数量匹配 -->
                <div class="col-md-4">
                    <div class="matching-card">
                        <img src="<?php echo asset_url('images/number-matching.jpg'); ?>" alt="数量匹配" class="matching-image">
                        <div class="matching-info">
                            <h3 class="matching-name">数量匹配</h3>
                            <p class="matching-description">将数字与对应数量的物品配对，增强数学概念。</p>
                            <p class="matching-level">难度：★★☆</p>
                            <a href="<?php echo page_url('matching-numbers'); ?>" class="btn btn-matching">开始游戏</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 游戏玩法 -->
    <div class="how-to-play">
        <h2 class="how-to-title">如何玩形状匹配游戏</h2>
        
        <div class="step-item">
            <div class="step-number">1</div>
            <div class="step-content">
                <h3 class="step-title">选择游戏</h3>
                <p class="step-text">从上面的游戏列表中选择一个你喜欢的匹配游戏。</p>
            </div>
        </div>
        
        <div class="step-item">
            <div class="step-number">2</div>
            <div class="step-content">
                <h3 class="step-title">观察物品</h3>
                <p class="step-text">仔细观察屏幕上的物品，找出它们之间的关系（形状、颜色、大小等）。</p>
            </div>
        </div>
        
        <div class="step-item">
            <div class="step-number">3</div>
            <div class="step-content">
                <h3 class="step-title">进行匹配</h3>
                <p class="step-text">根据游戏类型，用鼠标拖拽或点击选择物品进行匹配连线。</p>
            </div>
        </div>
        
        <div class="step-item">
            <div class="step-number">4</div>
            <div class="step-content">
                <h3 class="step-title">获得反馈</h3>
                <p class="step-text">匹配正确会有愉快的音效和动画反馈，错误则会有提示让你重试。</p>
            </div>
        </div>
        
        <div class="step-item">
            <div class="step-number">5</div>
            <div class="step-content">
                <h3 class="step-title">完成挑战</h3>
                <p class="step-text">成功匹配所有物品后，会得到奖励和鼓励，然后可以选择下一个游戏。</p>
            </div>
        </div>
    </div>
    
    <!-- 游戏益处 -->
    <div class="benefits-section">
        <h2 class="benefits-title">形状匹配的益处</h2>
        
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🧩</div>
                    <h3 class="benefit-title">逻辑思维</h3>
                    <p class="benefit-text">通过寻找物品之间的关系，培养孩子的逻辑推理能力。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🔍</div>
                    <h3 class="benefit-title">观察能力</h3>
                    <p class="benefit-text">需要仔细观察物品的特征，提高视觉辨别能力。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">📊</div>
                    <h3 class="benefit-title">分类能力</h3>
                    <p class="benefit-text">学习根据不同特征对物品进行分类和归纳。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🧠</div>
                    <h3 class="benefit-title">认知发展</h3>
                    <p class="benefit-text">理解物品间的关系，促进认知结构的形成。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">👁️</div>
                    <h3 class="benefit-title">视觉追踪</h3>
                    <p class="benefit-text">在连线过程中锻炼眼睛的视觉追踪能力。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-item text-center">
                    <div class="benefit-icon">🖐️</div>
                    <h3 class="benefit-title">精细动作</h3>
                    <p class="benefit-text">拖拽和点击操作有助于提高手眼协调和精细动作控制。</p>
                </div>
            </div>
        </div>
    </div>
</div> 